<template>
    <div  class="content">
        <h2>{{todo}}</h2>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                todo:null
            }
        },
        created(){
          this.fetchData()
        },
        watch:{
          '$route':'fetchData'
        },
        methods:{
            fetchData(){
                this.axios.get('http://mg.com/api/'+this.$route.params.id).then(response=>{
                    console.log(response.data)
                    this.todo=response.data
                })
            }
        }
    }
</script>

<style scoped>
    .completed{
        color:aquamarine;
        text-decoration: line-through;
    }
</style>
